
import {ExtractDefaultPropTypes,computed} from "vue"
import {TinyColor} from "@ctrl/tinycolor"
import {props,Props} from "./interface"

type aprops = ExtractDefaultPropTypes<typeof props>

export function useButtonCustomStyle(props:Props){

    return computed(()=>{
        let styles:Record<string,string> = {}
        
        let buttonStyle = props?.color

        if(buttonStyle){
            const color = new TinyColor(buttonStyle)
            if(props.plain){
                // console.log(color.tint(90).toString(),"color")
                styles = {
                    "background-color":color.tint(90).toString(),
                    color:buttonStyle,
                    "--hover-background-color-1":buttonStyle,
                    "--hover-color":buttonStyle,
                    "border-color":buttonStyle
            
                }

            }else{
                styles = {
                    "background-color":buttonStyle,
                    color:"#fff",
                    "--hover-background-color-1":buttonStyle,
                    // "--hover-color":"pink",
                    "--hover-background-color-5":buttonStyle,
                   
                }
            }
         
        }
        return styles
    })

}